<template>
  <van-button
    round
    v-if="isLoading"
    color="#3296FA"
    type="primary"
    @click="isAttentionHandle()"
  >
    <van-icon name="plus" v-if="!$attrs.isAttention" />
    {{$attrs.isAttention? "取消关注" : "关注" }}
  </van-button>
  <van-button round v-else loading color="#3296FA" type="primary"> </van-button>
</template>

<script>
import { addAttention, cancelAttention } from '@/api/homepage/articleLists.js'
export default {
  data () {
    return {
      isLoading: true
    }
  },
  model: {
    prop: 'isAttention', // 接收父组件传递过来的参数  实现父子组件的数据双向绑定
    event: 'changeIsAttention' // 这是自定义事件用于传递给父组件值 父组件因为双向绑定了上面的值可以不用监听这个事件值会自动改变
  },
  props: {
    autID: { type: [Number, Object], required: true }
  },
  mounted () {},
  created () {
  },
  methods: {
    async isAttentionHandle () {
      this.isLoading = false
      try {
        if (!this.$attrs.isAttention) {
          // 添加关注
          await addAttention(this.autID)
          this.$attrs.isAttention = true
        } else {
          // 取消关注
          await cancelAttention(this.autID)
          this.$attrs.isAttention = false
        }
      } catch (error) {
        console.log(error)
      }
      this.isLoading = true
      // this.$emit("changeIsAttention", this.$attrs.isAttention);
    }
  }
}
</script>

<style lang="less" scoped>
.van-button {
  width: 200px;
  height: 60px;
}
.van-button--round {
  border-radius: 90px;
}
</style>
